<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1{width:780px;height:400px;background:url(./00.jpg) no-repeat; margin: 20px auto; overflow: hidden;}
    body{background:black;margin:0;}
  </style>
</head>
<body>
<div id="div1">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <g style="cursor: pointer">
      <line x1="100" y1="100" x2="390" y2="200" stroke="red"></line>
      <!--↓为了方便点击(显示手型图标),盖上一个透明的粗的线-->
      <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10px"></line>
      <rect x="245" y="140" fill="#999" width="20" height="20" rx="5"></rect>
      <text x="255" y="158" fill="white" font-size="20" text-anchor="middle">?</text>
    </g>
    <g style="cursor: pointer">
      <circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>
      <text x="100" y="110" font-size="20" text-anchor="middle">bilibili</text>
    </g>
    <g style="cursor: pointer">
      <circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>
      <text x="390" y="208" font-size="20" text-anchor="middle">acfun</text>
    </g>
  </svg>
</div>
</body>
</html>
